<template>
  <div class="wrapper">
    <div class="loginWrapper">
      <img class="backgroundImg" src="../../../assets/static/login/bg.png" alt=""/>
      <!--    返回    -->
      <div class="revertImgWrapper">
        <img class="revertImg" src="../../../assets/static/publicImg/back.png" alt=""/>
      </div>
    </div>
    <div class="loginInfoWrapper">
      <!--  图标  -->
      <div class="logoImgWrapper">
        <img class="logoImg" src="../../../assets/static/login/logo.png" alt=""/>
      </div>
      <!--  login  -->
      <div>
        <!--   title   -->
        <div>
          <img src="../../../assets/static/login/r1.png" alt=""/>
          <span>Login</span>
          <img src="../../../assets/static/login/r2.png" alt=""/>
        </div>
        <div>
          <!--   登录   -->
          <div>
            <!--     title   -->
            <div>
              <div>
                <img src="../../../assets/static/login/p.png" alt=""/>
              </div>
              <div>
                <span>Phone</span>
              </div>
            </div>
            <div>
              <div>
                <div>
                  <span>sG65V</span>
                </div>
                <div>
                  <img src="../../../assets/static/login/d1.png" alt=""/>
                </div>
              </div>
              <div>
                <div>
                  <span>Phone number</span>
                </div>
              </div>
            </div>
          </div>
          <!--   Get code   -->
          <div>
            <img src="../../../assets/static/login/rea.png" alt=""/>
            <button>Get code</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.revertImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.revertImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
/*-------------- img图片 -----------------*/
.backgroundImg{
  width: 748.9px;
  height: 963.5px;
}
.revertImg{
  width: 17px;
  height: 29px;
}
.logoImg{
  width: 609px;
  height: 255px;
}
</style>
